<template>
    <div class="main-template" v-bind:dataValue="showLoading">
        <div class="main-header user-box-detial">
            <div class="main-header-box">
                <yd-flexbox class="user-detial">
                    <div class="user-pic">
                        <img :src="postData.shr_info.avatar[0].image" alt="">
                    </div>
                    <yd-flexbox-item>
                        <yd-flexbox direction="vertical">
                            <yd-flexbox-item>
                                <p class="user-name">{{postData.shr_info.name}}</p>
                            </yd-flexbox-item>
                            <yd-flexbox-item>
                                <p>身份证:{{postData.shr_info.idcard}}</p>
                            </yd-flexbox-item>
                            <yd-flexbox-item>
                                <p>联系电话:{{postData.phone}}</p>
                            </yd-flexbox-item>
                            <yd-flexbox-item>
                                <p>通讯地址:{{postData.shr_info.address}}</p>
                            </yd-flexbox-item>
                        </yd-flexbox>
                    </yd-flexbox-item>
                </yd-flexbox>
            </div>
        </div>
        <div class="user-edit-template">
            <yd-cell-group>
                <yd-cell-item>
                    <span slot="left">账号：</span>
                    <yd-input slot="right" v-model="postData.user_name" :debug="true" placeholder="请输入账号" disabled></yd-input>
                </yd-cell-item>
                <yd-cell-item>
                    <span slot="left">姓名：</span>
                    <yd-input slot="right" v-model="postData.shr_info.name" :debug="true" required placeholder="请输入您的姓名" ref="name"></yd-input>
                </yd-cell-item>
                <yd-cell-item>
                    <span slot="left">性别：</span>
                    <span slot="left">
                        <yd-radio-group v-model="postData.shr_info.sex" >
                            <yd-radio val="男"></yd-radio>
                            <yd-radio val="女"></yd-radio>
                        </yd-radio-group>
                    </span>
                </yd-cell-item>
                <yd-cell-item>
                    <span slot="left" @click="openPicker">出生日期：{{showBirth}}</span>
                </yd-cell-item>
                <yd-cell-item>
                    <span slot="left">身份证：</span>
                    <yd-input slot="right" v-model="postData.shr_info.idcard" :debug="true" required placeholder="请输入身份证" ref="idcard"></yd-input>
                </yd-cell-item>
                <yd-cell-item>
                    <span slot="left">学历：</span>
                    <yd-input slot="right" v-model="postData.shr_info.education" :debug="true" required placeholder="请输入学历" ref="education"></yd-input>
                </yd-cell-item>
                <yd-cell-item>
                    <span slot="left">通讯地址：</span>
                    <yd-input slot="right" v-model="postData.shr_info.address" :debug="true" required placeholder="请输入讯地址" ref="address"></yd-input>
                </yd-cell-item>
                <yd-cell-item>
                    <span slot="left">联系电话：</span>
                    <yd-input slot="right" v-model="postData.phone" regex="mobile" placeholder="请输入联系电话" ref="phone"></yd-input>
                </yd-cell-item>
                <!--<yd-cell-item>
                    <span slot="left">支行名称：</span>
                    <yd-input slot="right" v-model="postData.shr_info.bank_branch_name" placeholder="请输入支行名称" disabled></yd-input>
                </yd-cell-item>-->
                <yd-cell-item>
                    <span slot="left">户名：</span>
                    <yd-input slot="right" v-model="postData.shr_info.account_name" placeholder="请输入户名" disabled></yd-input>
                </yd-cell-item>
                <yd-cell-item>
                    <span slot="left">银行名称：</span>
                    <yd-input slot="right" v-model="postData.shr_info.bank_name" placeholder="请输入银行名称" disabled></yd-input>
                </yd-cell-item>
                <yd-cell-item>
                    <span slot="left">银行账号：</span>
                    <yd-input slot="right" v-model="postData.shr_info.account_no" placeholder="请输入银行账号" disabled></yd-input>
                </yd-cell-item>
            </yd-cell-group>
            <yd-button-group>
                <yd-button size="large" @click.native="sbumitForm">保存</yd-button>
            </yd-button-group>
        </div>
        <mt-datetime-picker ref="picker" type="date" v-model="pickerValue" v-bind:startDate="checkStarDate" @confirm="handleConfirm">
        </mt-datetime-picker>
        <yd-tabbar slot="tabbar" class="public-footer">
            <yd-tabbar-item title="首页" link="/">
                <yd-icon name="home" slot="icon"></yd-icon>
            </yd-tabbar-item>
            <yd-tabbar-item title="投资收益" link="/income">
                <yd-icon name="shopcart-outline" slot="icon"></yd-icon>
            </yd-tabbar-item>
            <yd-tabbar-item title="信息交流" link="/message">
                <yd-icon name="like-outline" slot="icon"></yd-icon>
            </yd-tabbar-item>
            <yd-tabbar-item title="个人中心" link="/user" active>
                <yd-icon name="ucenter-outline" slot="icon"></yd-icon>
            </yd-tabbar-item>
        </yd-tabbar>
    </div>
</template>
<script>
    import Ajax from "../api/ajax.js";
    import dataURL from "../data/dataURL.js";
    import Funcs from "../service/funcs.js";
    import '../data/date.js'
    export default {
        data() {
            return {
                pickerValue: new Date(),
                postData: {
                    "user_id": '',
                    "user_name": "",// 用户名
                    "phone": "",// 手机号
                    "role": '',// 角色
                    "status": "",// 账号状态
                    "created_at": "",//
                    "updated_at": "",//
                    "shr_info": {
                        "sh_id": '',//
                        "user_id": '',// 用户id
                        "avatar": [{
                            image: "",
                        }],// 头像地址
                        "name": "",// 姓名
                        "sex": 1,// 性别
                        "idcard": "",// 身份证号
                        "birth": "",// 生日
                        "education": "",// 学历
                        "bank_name": "",// 银行名称
                        "bank_branch_name": "",// 支行名称
                        "account_name": "",// 户名
                        "account_no": "",// 账号
                        "address": "",// 地址
                        "email": "",// 邮件
                        "wechat": "",// 微信
                        "qq": "",// qq
                        "note": "",// 备注
                        "created_at": "",
                        "updated_at": ""
                    }
                },
                loadBloean: true

            }
        },
        methods: {
            async sbumitForm() {
                for (var i in this.$refs) {
                    this.$refs["picker"].valid = true
                    if (!this.$refs[i].valid) {
                        this.$dialog.toast({
                            mes: '请正确输入个人信息',
                            timeout: 500,
                        });
                        return;
                    }
                }
                let prama = Funcs.deepCopy(this.postData);
                prama.shr_info.birth = this.pickerValue.format("yyyy-MM-dd");
                prama.shr_info.sex == "男" ? prama.shr_info.sex = 1 : prama.shr_info.sex = 2;
                try {
                    let res = await Ajax.Post(dataURL.user.saveInfo, prama)
                    console.info(res);
                    this.$dialog.toast({
                        mes: '保存成功',
                        timeout: 500,
                    });
                } catch (error) {
                    this.$dialog.toast({
                        mes: '保存失败',
                        timeout: 500,
                    });
                }
            },
            onValuesChange(picker, values) {
                if (values[0] > values[1]) {
                    picker.setSlotValue(1, values[0]);
                }
            },
            openPicker() {
                this.$refs.picker.open();
            },
            handleConfirm() {
                console.info(this.pickerValue)
            },
            // 页面加载初始化
            async created() {
                try {
                    let res = await Ajax.Post(dataURL.user.info);
                    if (res.shr_info.sex == 1) {
                        res.shr_info.sex = "男"
                    } else {
                        res.shr_info.sex = "女"
                    }
                    this.postData = res;
                    this.pickerValue = new Date(this.postData.shr_info.birth);
                    this.loadBloean = false;
                } catch (error) {
                    this.loadBloean = false;
                    console.log("error")
                }
            }
        },
        computed: {
            checkStarDate() {
                return new Date("January 12,1970");
            },
            showBirth() {
                let time = this.pickerValue;
                let year = time.getFullYear();
                let month = time.getMonth() + 1;
                let date = time.getDate();
                return year + "-" + month + "-" + date;
            },
            showLoading() {
                if (this.loadBloean) {
                    this.$dialog.loading.open('很快加载好了');
                } else {
                    this.$dialog.loading.close();
                }
            }
        },
        mounted() {
            this.created();
        }
    }

</script>